<template>
    <PageWrapper dense fixedHeight>
        <ParamGroup @select="handleSelect" :groupcode="searchInfo.groupcode ? searchInfo.groupcode : ''" />
        <BasicTable @register="registerTable" :searchInfo="searchInfo">
            <!-- 标记 -->
            <template #statusFlag="{ record }">
                <template v-if="record.flag == 0">
                    <Tag :color="'green'">启用</Tag>
                </template>
                <template v-if="record.flag == 5">
                    <Tag :color="'yellow'">禁用</Tag>
                </template>
                <template v-if="record.flag == 9">
                    <Tag :color="'red'">已删除</Tag>
                </template>
            </template>
            <template #paramType="{ record }">
                {{ returnGroupType(record) }}
            </template>
            <!-- 是否为空 -->
            <template #nullFlag="{ record }">
                <Tag :color="record.notnull ? 'processing' : 'volcano'">{{ record.notnull ? '是' : '否' }}</Tag>
            </template>
            <template #toolbar>
                <a-button type="primary" @click="onAddItem">新增参数项</a-button>
            </template>
            <template #action="{ column, record }">
                <TableAction :actions="[
            {
                icon: 'clarity:note-edit-line',
                tooltip: '编辑',
                onClick: onEditItem.bind(null, record),
            },
            {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                tooltip: '删除',
                popConfirm: {
                    title: '是否确认删除',
                    placement: 'left',
                    confirm: onDeleteItem.bind(null, record),
                },
            },
        ]
            " />
            </template>
        </BasicTable>
        <AddOrUpdateParamItem @register="registerAddOrUpdateItemForm" @success="afterSuccess" />
    </PageWrapper>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onBeforeMount } from 'vue';

import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { Tag } from 'ant-design-vue';
import { PageWrapper } from '/@/components/Page';
import { QcUnifyTransToChildProps } from '/#/QcUnify';
import { OperationTypeEnum } from '/@/enums/appEnum';
import { useModal } from '/@/components/Modal';
import AddOrUpdateParamItem from './AddOrUpdateParamItem.vue'
import { getGroupItems, deleteItem, getAllTypeSelect } from '/@/api/platform/param';
import { paramConditionFormSchema, itemTableColumns } from './param.data';

import { useMessage } from '/@/hooks/web/useMessage';
import { message } from 'ant-design-vue';
const { createMessage } = useMessage();

import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
import ParamGroup from './ParamGroupIndex.vue';
const { clipboardRef } = useCopyToClipboard();


export default defineComponent({
    name: 'ParamItemIndex',
    components: {
        BasicTable,
        PageWrapper,
        ParamGroup,
        AddOrUpdateParamItem,
        TableAction,
        Tag,
    },
    setup() {

        const searchInfo = reactive<Recordable>({});
        const selectType = ref([]);
        const [registerAddOrUpdateItemForm, { openModal: openAddOrUpdateForm }] = useModal();
        const [registerTable, { reload, setTableData, getDataSource }] = useTable({
            title: '参数项管理',
            api: getGroupItems,
            rowKey: 'id',
            columns: itemTableColumns,
            formConfig: {
                labelWidth: 80,
                schemas: paramConditionFormSchema,
                autoSubmitOnEnter: true,
                showResetButton: false,//查询条件部分中是否显示重置按钮
            },
            ellipsis: false,
            canResize: true,
            useSearchForm: true,
            immediate: false,
            bordered: true,
            striped: false,
            showTableSetting: true,
            indexColumnProps: {
                width: 50
            },
            beforeFetch: (data) => {
                if (!searchInfo.groupcode || searchInfo.groucode == '') {
                    message.error('请先选择参数分组');
                    return;
                } else {
                    return data;
                }
            },
            actionColumn: {
                width: 80,
                title: '操作',
                dataIndex: 'action',
                slots: { customRender: 'action' },
                fixed: 'right', //表格操作列是否固定，不设置时默认固定在右侧
            },
        });

        /**
         * 打开新增窗口,将左侧选中的分组传过去
         */
        function onAddItem() {
            //构造父组件给子组件传值对象
            let propsData: QcUnifyTransToChildProps = {
                moduleName: '参数项管理',
                operateType: OperationTypeEnum.ADD,
                groupcode: searchInfo.groupcode
            };
            openAddOrUpdateForm(true, propsData);
        }
        /**
         * 打开编辑窗口
         * @param record 
         */
        function onEditItem(record: Recordable) {
            //构造父组件给子组件传值对象
            let propsData: QcUnifyTransToChildProps = {
                moduleName: '参数项管理',
                operateType: OperationTypeEnum.EDIT,
                dataId: record.id,
            };
            openAddOrUpdateForm(true, propsData);
        }

        /**
         * 删除参数项
         * @param record 
         */
        function onDeleteItem(record: Recordable) {
            deleteItem(record.id)
                .then((res) => {
                    console.log('res', res);
                    //res判断结果：同时==undefined和null
                    if (res == undefined && (res == null || Object.keys(res).length == 0)) {
                        createMessage.success('删除成功。', 2);
                        reload();
                    }
                })
                .catch((ex) => {
                    console.log('catch ', ex);
                    createMessage.error(ex.msg);
                });
        }

        /**
         * 点击分组获取分组id
         * @param groupcode 分组id
         */
        async function handleSelect(groupcode = '') {
            // 若不判断,在取消选择时,会提示请求携带分组编码不能为空的错误,所以直接将表格数据设置为空(默认),并return出去,不发送请求
            if (groupcode === '') {
                searchInfo.groupcode = ""
                setTableData([]);
                return;
            }
            searchInfo.groupcode = groupcode;
            reload();
        }
        function returnGroupType(record) {
            for (let i of selectType.value) {
                if (record.datatype === i.value) {
                    return i.label;
                }
            }
        }
        /**
         * 新增/编辑弹窗确认操作之后刷新页面
         */
        function afterSuccess(groupcode) {
            handleSelect(groupcode);
        }
        onBeforeMount(() => {
            getAllTypeSelect().then((res) => {
                let Options = [];
                for (let d of res.datatypeOptions) {
                    // 这里要转number类型,因为获取全部参数类型请求回来的数据key为string,而其他接口为Number
                    Options.push({ value: Number(d.key), label: d.value });
                }
                selectType.value = Options;
            })
        })
        return {
            registerTable,
            registerAddOrUpdateItemForm,
            handleSelect,
            searchInfo,
            selectType,
            returnGroupType,
            afterSuccess,
            onAddItem,
            onEditItem,
            onDeleteItem,
            getGroupItems
        };
    },
});
</script>
